import React, { useState } from 'react'
import { Popup, Button, Input, Form, Dialog } from 'antd-mobile'
import {
    // AddCircleOutline,
    EyeInvisibleOutline,
    EyeOutline
} from 'antd-mobile-icons'
export default function MyPopup() {
    const [visible, setVisible] = useState(false)
    const [visible1, setVisible1] = useState(false)
    const [value, setValue] = useState('')
    const [form] = Form.useForm()
    const onSubmit = () => {
        const values = form.getFieldsValue()
        console.log(values)
        Dialog.alert({
            content: <pre>{JSON.stringify(values)}</pre>,
        })
    }
    return (
        <div>
            <Button fill='solid' color='primary' onClick={() => setVisible(true)}>底部弹出</Button>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false)
                }}
                showCloseButton
                onClose={() => {
                    setVisible(false)
                }}
                bodyStyle={{ height: '40vh' }}
            >
                <Button fill='solid' color='primary'>我的按钮</Button>
                <Input placeholder='请输入内容'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                    clearable
                />

                <Form
                    layout='horizontal'
                    form={form}
                    initialValues={{
                        a: 'aaa',
                        b: [],
                    }}
                    footer={
                        <Button block type='submit' color='primary' size='large' onClick={onSubmit}>
                            提交
                        </Button>
                    }
                >
                    <Form.Item label='用户名' name='username'>
                        <Input placeholder='请输入用户名' clearable />
                    </Form.Item>
                    <Form.Item
                        label='密码'
                        name='password'
                        extra={
                            <div className='eye'>
                                {!visible1 ? (
                                    <EyeInvisibleOutline onClick={() => setVisible1(true)} />
                                ) : (
                                    <EyeOutline onClick={() => setVisible1(false)} />
                                )}
                            </div>
                        }
                    >
                        <Input
                            placeholder='请输入密码'
                            clearable
                            type={visible ? 'text' : 'password'}
                        />
                    </Form.Item>
                </Form>
            </Popup>
            {/* <AddCircleOutline /> */}
        </div>
    )
}
